<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>易知学社</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="/assets/web/css/double.css" />
		<link rel="stylesheet" type="text/css" href="/assets/web/css/course.css" />
		<script src="/assets/web/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/assets/layer/layer.js"></script>


	</head>
	<body>
	<input  type="hidden" id="isBuy" value="${isBuy}">
		<!-- 底部 -->
		<div class="footer">
			<div class="collection"  onclick="collect(${course.id})">
				@if(collect==1){
				<img src="/assets/web/img/shoucang.png">
				@}
				@if(collect==0){
				<img src="/assets/web/img/collection2x.png">
				@}

				<span>收藏</span>
			</div>

			<a onclick="buy(${course.id},${video.id})">购买单节</a>
			<a onclick="buy(${course.id},0)">购买整套</a>
		</div>
		<!-- 视频 -->
		<div class="video" style="height: 250px">
			<video width="100%" height="250px" id="video"

				     src="${video.video}"

				 controls="controls" id="video">

			</video>
			<span class="prompt" style="display:none" id="buycover">购买后可观看</span>
		</div>
		<!-- 课程介绍 -->
		<div class="center">
			<div class="top">
				<div class="title">
					<h2>${course.name}</h2><span>${category.name}</span>
					<p>【${course.intro}】</p>
				</div>
				<div class="share">
					<a href="share.html">
						<img src="/assets/web/img/fenxiang2x.png" >
						<p>分享</p>
					</a>
				</div>
			</div>
			<div class="bottom">
				<p class="price">
					¥${course.price} <del>¥${course.orgPrice}</del>
				</p>
				<p>
					${course.people}人已学习
				</p>
			</div>
		</div>
		<!-- 内容tab -->
		<div class="course_tab">
			<div class="select-list">
				<ul class="clearfix">
					<li class="fl over">课程详情</li>
					<li class="fl">课程目录</li>
				</ul>
			</div>
			<div class="content-list">
				<ul>
					<li class="over content">
						${course.content}

					</li>
					<li class="details">
						@for(item in videoList){
						<a onclick="changeVideo(${item.id},${item.courseId})">
							<h3>${itemLP.index}、${item.name}</h3>
							<img src="/assets/web/img/lock2x.png" >
						</a>
						@}
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			$(function(){
				$('.select-list li').click(function(){
					$(this).addClass('over').siblings('li').removeClass('over');
					$('.content-list li').removeClass('over').eq($(this).index()).addClass('over');
				})
			})
		</script>
	</body>
</html>
<script>
	function changeVideo(id,courseId){

		///$("#video").attr("src",url);
		window.location.replace('/web/course/course?id='+courseId+'&videoId='+id);


	}
	$(function(){
		//判断是否购买
		var isBuy=$("#isBuy").val();
		if(isBuy==0){
			$("#video").css("display","none");
			$("#buycover").css("display","block");
		}else{
			$("#video").css("display","block");
			$("#buycover").css("display","display");
		}

	})
	//购买课程，购买整套的话videoid传0
function buy(courseId,videoId){
	$.ajax({
		url:"buy",
		type:"POST",
		data:{
			courseId:courseId,
			videoId:videoId
		},
		success:function(data){


		}
	})

}
/*
收藏
 */
function collect(courseId){

	$.ajax({
		url:"/web/course/collect",
		type:"POST",
		data:{
			courseId:courseId,

		},
		success:function(data){
	      if(data.data==0){
	      	//取消了
			  $('.collection img').attr('src','/assets/web/img/collection2x.png');
		  }else{
         //收藏
			  $('.collection img').attr('src','/assets/web/img/shoucang.png');
		  }

		}
	})
}

</script>
